<template>
  <!-- 展览 -->
  <div class="exhibition-container">
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #list>
        <div class="tags">
          <span class="tag-item" :class="{ active: currentTag == tag }" v-for="(tag, index) in tags" :key="index" @click="toggleTag(tag)">#{{ tag }}</span>
        </div>
        <van-empty v-if="exhibitionList.length == 0" class="custom-image" :image="require('@/assets/head/none.jpg')" />
        <!-- 活动列表 -->
        <div class="exhibition-list" v-else>
          <feeds-item
            v-for="(ex, index) in exhibitionList"
            :key="index"
            :pic_url="ex.covers[0].url"
            :title="ex.title"
            :name="ex.addresses[0].name"
            :time="ex.time"
            :price_desc="ex.price_desc"
            :card_price="ex.go_card_discounted_price"
            :plus_price="ex.go_card_discounted_price"
            :view_count="ex.view_count"
            :reason_text="ex.reason_text"
            :post_covers="ex.post_covers"
            :feed_id="ex.id"
          ></feeds-item>
        </div>
      </template>
    </refresh-list>
  </div>
</template>
<script>
import RefreshList from '../public-component/RefreshList.vue'
import FeedsItem from '../public-component/FeedsItem.vue'
import axios from '@/utils/request'
import { mapState } from 'vuex'
export default {
  name: 'exhibition',
  props: {
    reset: Boolean
  },
  components: {
    FeedsItem,
    RefreshList
  },
  watch: {
    reset() {
      this.offset = 0
      this.tags = []
      this.exhibitionList = []
      this.sendRequest()
    }
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      limit: 10, // 是每次请求数据的数量
      offset: 0, // 每次请求数据的偏移量
      tags: [],
      currentTag: '', // 导航栏选中类型
      exhibitionList: []
    }
  },
  computed: {
    ...mapState(['time', 'sort_by'])
  },
  methods: {
    // 请求导航栏选项
    async requestTarBarTags() {
      /*
        请求地址：https://api.xmonster.cn/v2/categories/nexhibition/tags
        请求方式：get
      */
      const data = await axios.get('/v2/categories/nexhibition/tags')
      this.tags = data
    },
    // 请求活动数据
    async requestExhibitionData() {
      /*
      请求地址：https://api.xmonster.cn/v2/categories/nexhibition/feeds
      请求方式：get
      请求参数：
      params：{
        limit: 10    每次获取多少数据
        offset：10       偏移量，每次增加limit的数量
      }
      */
      const data = await axios.get('/v2/categories/nexhibition/feeds', {
        params: {
          tag: this.currentTag,
          limit: this.limit,
          offset: this.offset,
          sort_by: this.sort_by,
          time: this.time
        }
      })
      if (data.length > 0) {
        this.offset += 10
        this.exhibitionList = [...this.exhibitionList, ...data]
        this.status.loading = false
        this.status.finished = false
      } else {
        this.status.finished = true
      }
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      this.requestTarBarTags()
      await this.requestExhibitionData()
      Toast.clear()
    },
    // 下拉刷新
    async onRefresh() {
      this.offset = 0
      this.exhibitionList = []
      this.requestTarBarTags()
      await this.requestExhibitionData()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestExhibitionData()
      this.status.loading = false
    },

    //切换tag
    async toggleTag(tag) {
      if (this.currentTag == tag) {
        this.currentTag = ''
      } else {
        this.currentTag = tag
      }
      this.offset = 0
      this.exhibitionList = []
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      await this.requestExhibitionData()
      Toast.clear()
    }
  },
  created() {
    this.sendRequest()
  }
}
</script>

<style lang="less" scoped>
.exhibition-container {
  padding-bottom: 50px;
  ::v-deep .van-empty {
    margin-top: 80px;
  }
  .tags {
    padding: 10px 10px 0;
    overflow: auto;
    white-space: nowrap;
    display: flex;
    background-color: #fff;

    .tag-item {
      margin-right: 5px;
      color: #555;
      font-size: 12px;
      padding: 5px 15px;
      border-radius: 999px;
      font-weight: 500;
      background-color: #f1f1f1;

      &:last-of-type {
        margin-right: 0;
      }

      &.active {
        color: #d94648;
      }
    }
  }
  .exhibition-list {
    padding: 20px 10px 0;
  }
}
</style>
